<template>
  <div class="container">
    <h1>我是父组件</h1>
    <div class="father-box">
      渲染父组件的内容
      <h2>我是拿到的子组件的内容 {{ city }}</h2>
    </div>

    <h1>我是子组件区域</h1>
    <A :result="result" @onClick="onClick" />
    <B />
  </div>
</template>
<script>
// 模拟接口数据
function createData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve({ code: 0, msg: 'success', data: [{ id: 1, city: '北京' }] })
    }, 3000)
  })
}

import A from './components/A.vue'
import B from './components/B.vue'
export default {
  components: {
    A,
    B,
  },
  data() {
    return {
      msg: 'vue',
      result: {},
      city: '',
    }
  },
  created() {
    this.getData()
  },
  methods: {
    onClick(city) {
      console.log('city:', city)
      this.city = city
    },
    async getData() {
      // 将数据传递给子组件，要先把数据定义在父组件中，然后才能传递给子组件
      const response = await createData()
      console.log('response', response)
      this.result = response
    },
  },
}
</script>
<style lang="scss">
.read-item {
  line-height: 35px;
  /* overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  border-bottom: 1px solid #eee;
}
.tag {
  display: inline-block;
  padding: 5px 10px;
  margin: 5px;
  border: 1px solid #eee;
  border-radius: 5px;
}
.father-box {
  margin-top: 10px;
  height: 150px;
  border: 1px solid #000;
  border-radius: 10px;
  margin-bottom: 10px;
}
</style>
